<template>
  <el-card>
    <template #header>
      <div class="card-header">
        <span>审核列表</span>
      </div>
    </template>

    <!-- 搜索 -->
    <div>
      <el-form inline>
        <el-form-item label="房主">
          <el-input v-model="searchForm.hostName" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="出租类型">
          <el-select v-model="searchForm.rentType">
            <el-option label="整套出租" value="1"></el-option>
            <el-option label="单间出租" value="2"></el-option>
            <el-option label="合住房间" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="房源类型">
          <el-select v-model="searchForm.homeType">
            <el-option label="别墅" value="1"></el-option>
            <el-option label="公寓" value="2"></el-option>
            <el-option label="住宿加早餐" value="3"></el-option>
            <el-option label="Loft" value="4"></el-option>
            <el-option label="小木屋" value="5"></el-option>
            <el-option label="城堡" value="6"></el-option>
            <el-option label="宿舍" value="7"></el-option>
            <el-option label="蒙古包" value="8"></el-option>
            <el-option label="帐篷" value="9"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="面积">
          <el-input
            v-model="searchForm.minSpace"
            size="small"
            style="width: 60px"
          />
          &nbsp;-&nbsp;
          <el-input
            v-model="searchForm.maxSpace"
            size="small"
            style="width: 60px"
          />
        </el-form-item>
        <el-form-item label="价格">
          <el-input
            v-model="searchForm.minPrice"
            size="small"
            style="width: 60px"
          />
          &nbsp;-&nbsp;
          <el-input
            v-model="searchForm.maxPrice"
            size="small"
            style="width: 60px"
          />
        </el-form-item>
        <!-- <el-form-item label="状态">
          <el-select v-model="searchForm.status">
            <el-option label="未发布" value="1"></el-option>
            <el-option label="待审核" value="2"></el-option>
            <el-option label="已上线" value="3"></el-option>
            <el-option label="已下线" value="4"></el-option>
            <el-option label="审核失败" value="5"></el-option>
          </el-select>
        </el-form-item> -->
      </el-form>
      <div
        style="
          width: 100%;
          padding-bottom: 20px;
          display: flex;
          justify-content: flex-end;
        "
      >
        <el-button type="primary" @click="searchSubmit">搜索</el-button>
        <el-button @click="resetSearch">重置</el-button>
      </div>
    </div>

    <!-- 列表 -->
    <VTable :tableData="tableData" :options="options">
      <template #operate="scope">
        <el-button
          size="small"
          link
          type="primary"
          :icon="View"
          @click="handleDetail(scope.row)"
          >查看</el-button
        >
        <el-button
          type="success"
          @click="updateStatus(3, scope.row.id, scope.row.host)"
          >批准</el-button
        >
        <el-button
          type="danger"
          @click="updateStatus(5, scope.row.id, scope.row.host)"
          >拒绝</el-button
        >
      </template>
    </VTable>

    <!-- 弹窗 -->
    <el-dialog
      v-model="dialogVisible"
      :title="dialogTitle"
      style="width: 800px"
    >
      <!-- 详情 -->
      <Description
        v-if="actionType === '查看'"
        :options="options"
        :dataItem="dataItem"
      >
      </Description>

      <!-- 按钮 -->
      <template #footer>
        <el-button v-if="actionType === '查看'" @click="dialogVisible = false"
          >关闭</el-button
        >
      </template>
    </el-dialog>
  </el-card>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive } from "vue";
import { searchShenheHomestay } from "../../api/homestayManage/index";
import { getAllReview, reviewHomestay } from "../../api/reviewManage/index";
import VTable from "../../components/VTable/index.vue";
import Description from "../../components/Description/index.vue";
import { Delete, Edit, View, Plus } from "@element-plus/icons-vue";
import { ElMessage, ElMessageBox, ElStep } from "element-plus";
import { addInfoLog } from "../../api/infoManage/index";

import type {
  FormInstance,
  FormRules,
  UploadProps,
  UploadUserFile,
  UploadFile,
} from "element-plus";

const tableData = ref<any>([]);
const options = [
  {
    prop: "hostName",
    label: "房主",
    isTable: true,
    isForm: true,
    isSearch: true,
    width: 150,
  },
  {
    prop: "title",
    label: "标题",
    isTable: true,
    isForm: true,
    width: 240,
  },
  {
    prop: "photos",
    label: "图片",
    isForm: true,
  },
  {
    prop: "address",
    label: "地址",
    isTable: true,
    isForm: true,
    isSearch: true,
    width: 240,
  },
  {
    prop: "features",
    label: "房屋特色",
    // isTable: true,
    isForm: true,
  },
  {
    prop: "rentType",
    label: "出租类型",
    isTable: true,
    isForm: true,
    isSearch: true,
    width: 120,
  },
  {
    prop: "homeType",
    label: "房源类型",
    isTable: true,
    isForm: true,
    isSearch: true,
    width: 120,
  },
  {
    prop: "space",
    label: "面积（平方米）",
    isTable: true,
    isForm: true,
    isSearch: true,
    width: 150,
  },
  {
    prop: "mostPeople",
    label: "最多可住人数",
    isForm: true,
    isSearch: true,
  },
  {
    prop: "minDay",
    label: "最短入住天数",
    isForm: true,
    isSearch: true,
  },
  {
    prop: "price",
    label: "价格（元/晚）",
    isTable: true,
    isForm: true,
    isSearch: true,
    width: 120,
  },
  {
    prop: "facility",
    label: "配套设施",
    isForm: true,
  },
  {
    prop: "status",
    type: "more",
    label: "状态",
    isTable: true,
    isForm: true,
    isSearch: true,
    width: 120,
  },
  {
    prop: "hot",
    label: "热度",
    isTable: true,
    isForm: true,
    width: 120,
  },
  {
    prop: "country",
    label: "详细地址",
  },
  {
    prop: "map",
    label: "位置",
  },
];

const dialogTitle = ref("查看"); // 弹出层标题
const actionType = ref(""); // 操作按钮的类型
const dialogVisible = ref<boolean>(false);
const setDialogTile = (type: string) => {
  dialogTitle.value = type;
  actionType.value = type;
  dialogVisible.value = true;
};
const dataItem = ref<object>({});

//详情
const handleDetail = (scope: any) => {
  dataItem.value = scope;
  setDialogTile("查看");
};

//搜索
const searchForm = ref<any>({
  hostName: "",
  rentType: "",
  homeType: "",
  minSpace: "",
  maxSpace: "",
  minPrice: "",
  maxPrice: "",
});
const searchSubmit = async () => {
  const res = await searchShenheHomestay(searchForm.value);
  tableData.value = res.data.data;
};
//重置搜索
const resetSearch = async () => {
  searchForm.value = {
    hostName: "",
    rentType: "",
    homeType: "",
    minSpace: "",
    maxSpace: "",
    minPrice: "",
    maxPrice: "",
  };
  await onLoad();
};
//关闭弹窗
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
  dialogVisible.value = false;
};

//审核
const updateStatus = async (status: number, id: number, host: number) => {
  console.log(status, id, host);
  if (status === 3) {
    ElMessageBox.confirm("确认批准通过此房源?", "系统提示", {
      confirmButtonText: "确认",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(async () => {
        const res = await reviewHomestay({ status: status, id: id });
        if (res.data.success == true) {
          ElMessage({
            message: res.data.msg,
            type: "success",
          });
        } else {
          ElMessage.error(res.data.msg);
        }
        await onLoad();
        await addInfoLog({ infoId: 2, userId: host });
      })
      .catch(() => {
        ElMessage({
          type: "info",
          message: "取消审核",
        });
      });
  } else {
    ElMessageBox.confirm("确认不通过此房源?", "系统提示", {
      confirmButtonText: "确认",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(async () => {
        const res = await await reviewHomestay({ status: status, id: id });
        if (res.data.success == true) {
          ElMessage({
            message: res.data.msg,
            type: "success",
          });
        } else {
          ElMessage.error(res.data.msg);
        }
        await onLoad();
        const r = await addInfoLog({ infoId: 7, userId: host });
        console.log(r);
      })
      .catch(() => {
        ElMessage({
          type: "info",
          message: "取消删审核",
        });
      });
  }
};

const onLoad = async () => {
  const res = await getAllReview();
  tableData.value = res.data.data;
  console.log("table", tableData.value);
};

onMounted(async () => {
  await onLoad();
});
</script>
